import { Pie } from '@ant-design/plots';
import React from 'react';

interface PieSpiderChartProps {
  pieSpiderChartID: string;
  pieSpiderChartData: Array<pieSpiderChartDataList>;
}

type pieSpiderChartDataList = {
  type: string;
  value: number;
};

const PieSpiderChart: React.FC<PieSpiderChartProps> = ({
  pieSpiderChartID,
  pieSpiderChartData,
}) => {
  const config = {
    autoFit: 'true',
    data: pieSpiderChartData,
    angleField: 'value',
    colorField: 'type',
    radius: 0.8,
    label: {
      text: (d: any) => `占有率：${d.value}%`,
      position: 'spider',
      color: 'white',
    },
    legend: {
      color: {
        itemLabelFontSize: 12,
        itemLabelFill: '#fff',
      },
      size: {},
    },
    tooltip: {
      title: false,
      items: [
        (d: any) => {
          return { name: d.type, value: `${d.value}%` };
        },
      ],
    },
  };
  return <Pie id={pieSpiderChartID} {...config} />;
};

export default PieSpiderChart;
